<template>
  <div id="departments">
    <!-- 右侧卡片区域 -->
    <!-- 用户列表卡片区 -->
    <el-card class="box-card">
      <el-row :gutter="20">
        <el-col :span="8">
          <el-input
            clearable=""
            v-model="queryMap.deptName"
            placeholder="请输入部门查询"
            @clear="search"
            class="input-with-select"
          >
            <el-button slot="append" icon="el-icon-search" @click="search"></el-button>
          </el-input>
        </el-col>
        <el-col :span="2">
          <el-button
            type="success"
            icon="el-icon-circle-plus-outline"
            @click="add"
          >添加
          </el-button>
        </el-col>
        <el-col :span="2">
          <el-button
            icon="el-icon-download"
            @click="downExcel"
          >导出
          </el-button>
        </el-col>
      </el-row>
      <!-- 表格区域 -->
      <template>
        <el-table
          border
          v-loading="loading"
          stripe
          :data="departmentData"
          style="width: 100%;margin-top:20px;"
          height="460"
        >
          <el-table-column prop="id" label="ID" width="50"></el-table-column>
          <el-table-column prop="phone" label="办公电话" width="180"></el-table-column>
          <el-table-column prop="name" label="部门名" width="120"></el-table-column>
          <el-table-column prop="deptCount" label="人数" sortable="" width="80">
            <template slot-scope="scope">
              <el-tag effect="plain" v-text="scope.row.deptCount+'人'" size="mini">
              </el-tag>
            </template>
          </el-table-column>
          <el-table-column prop="createTime" label="创建时间" width="180" sortable=""></el-table-column>
          <el-table-column prop="modifiedTime" label="修改时间" width="180" sortable=""></el-table-column>
          <el-table-column prop="mgrName" label="部门主任" width="140"></el-table-column>
          <el-table-column prop="address" label="地址" width="180"></el-table-column>
          <el-table-column label="操作" fixed="right" width="120">
            <template slot-scope="scope">
              <el-button
                type="text"
                size="mini"
                icon="el-icon-edit"
                @click="edit(scope.row)"
              >编辑
              </el-button>

              <el-button
                type="text"
                size="mini"
                icon="el-icon-delete"
                @click="del(scope.row.id)"
              >删除
              </el-button>
            </template>
          </el-table-column>
        </el-table>
      </template>

      <!-- 部门添加或修改弹出框 -->
      <el-dialog :title="title" :modal-append-to-body="false" :visible.sync="addOrEditDialogVisible" width="50%"
                 @close="closeDialog">
        <span>
          <el-form
            :model="form"
            :rules="Rules"
            ref="form"
            label-width="100px"
            class="demo-ruleForm">
            <el-form-item label="部门名称" prop="name">
              <el-input v-model="form.name"></el-input>
            </el-form-item>
            <el-form-item label="部门主任" prop="mgrId">
              <el-select clearable @clear="search" v-model="form.mgrId" placeholder="请选择" value="">
                <el-option
                  v-for="(item, index) in deans"
                  :key="index"
                  :label="item.nickname"
                  :value="item.id"
                  @click.native="search">
                  <span style="float: left">{{ item.nickname }}</span>
                </el-option>
              </el-select>
            </el-form-item>
            <el-form-item label="办公电话" prop="phone">
              <el-input v-model="form.phone"></el-input>
            </el-form-item>
            <el-form-item label="办公地址" prop="address">
              <el-input type="textarea" v-model="form.address"></el-input>
            </el-form-item>
          </el-form>
        </span>
        <span slot="footer" class="dialog-footer">
          <el-button @click="addOrEditDialogVisible = false">取 消</el-button>
          <el-button type="primary" @click="submitForm">确 定</el-button>
        </span>
      </el-dialog>

    </el-card>
  </div>
</template>

<script>
  import { addDept, deleteDept, downDeptExcel, getDeptList, updateDept } from '../../../api/system/dept'
  import { findUserList } from '../../../api/system/users'

  export default {
    data () {
      var checkPhone = (rule, value, callback) => {
        const phoneReg = /^1[34578]\d{9}$$/
        if (!value) {
          return callback(new Error('电话号码不能为空'))
        }
        setTimeout(() => {
          if (!Number.isInteger(+value)) {
            callback(new Error('请输入数字值'))
          } else {
            if (phoneReg.test(value)) {
              callback()
            } else {
              callback(new Error('电话号码格式不正确'))
            }
          }
        }, 100)
      }
      return {
        loading: true,
        addOrEditDialogVisible: false, //添加弹框是否显示
        title: '',
        departmentData: [], //表格数据
        queryMap: { deptName: '' }, //查询对象
        form: {}, //添加表单数据
        deans: [], //所有部门主任
        Rules: {
          name: [
            {
              required: true,
              message: '请输入部门名称',
              trigger: 'blur'
            },
            {
              min: 3,
              max: 10,
              message: '长度在 3 到 10 个字符',
              trigger: 'blur'
            }
          ],
          address: [
            {
              required: true,
              message: '请输入办公地址',
              trigger: 'blur'
            },
            {
              min: 4,
              max: 12,
              message: '长度在 4 到 12 个字符',
              trigger: 'blur'
            }
          ],
          mgrId: [{
            required: true,
            message: '请选择部门主任',
            trigger: 'blur'
          }],
          phone: [
            {
              required: true,
              validator: checkPhone,
              trigger: 'blur'
            }
          ]
        } //添加验证
      }
    },
    created () {
      this.getDepartmentList()
      this.getBeansList()
      setTimeout(() => {
        this.loading = false
      }, 500)
    },

    methods: {

      //加载部门别列表
      getDepartmentList () {
        getDeptList(this.queryMap).then(res => {
          if (res) {
            this.departmentData = res.data.data.departments
          }
        })
      },

      reFresh () {
        this.getDepartmentList()
      },

      //导出部门Excel
      downExcel () {
        downDeptExcel()
          .then(res => {
            const data = res.data
            let url = window.URL.createObjectURL(data) // 将二进制文件转化为可访问的url
            const a = document.createElement('a')
            document.body.appendChild(a)
            a.href = url
            a.download = '部门列表.xls'
            a.click()
            window.URL.revokeObjectURL(url)
          })
      },

      /**
       * 搜索部门
       */
      search () {
        this.getDepartmentList()
      },

      //查询部门主任
      getBeansList () {
        findUserList(1, 100, { roleId: 140 }).then(res => {
          if (res) {
            this.deans = res.data.data.records
          }
        })
      },

      /**
       * 删除部门
       */
      async del (id) {
        const res = await this.$confirm(
          '此操作将永久删除该用户, 是否继续?',
          '提示',
          {
            confirmButtonText: '确定',
            cancelButtonText: '取消',
            type: 'warning'
          }
        ).catch(() => {
          this.$message({
            type: 'info',
            message: '已取消删除'
          })
        })
        if (res === 'confirm') {
          deleteDept(id).then(resp => {
            if (resp) {
              this.$message.success('部门删除成功')
              this.getDepartmentList()
            }
          })
        }
      },

      /**
       * 添加按钮
       *
       */
      async add () {
        this.title = '添加部门'
        this.addOrEditDialogVisible = true
      },
      /**
       * 编辑按钮
       *
       */
      async edit (row) {
        this.title = '修改部门'
        this.form = JSON.parse(JSON.stringify(row))
        this.addOrEditDialogVisible = true
      },
      //添加
      submitForm () {
        this.$refs.form.validate(async valid => {
          if (valid) {
            if (this.form.id === undefined) {
              addDept(this.form).then(res => {
                if (res.data.code === 200) {
                  this.$message.success('部门添加成功')
                  this.reFresh()
                  this.addOrEditDialogVisible = false
                  setTimeout(() =>
                    this.closeDialog(), 500)
                }
              })
            } else {
              this.form.createTime = undefined
              this.form.modifiedTime = undefined
              updateDept(this.form).then(res => {
                if (res.data.code === 200) {
                  this.$message.success('部门修改成功')
                  this.reFresh()
                  this.addOrEditDialogVisible = false
                  setTimeout(() =>
                    this.closeDialog(), 500)
                }
              })
            }
          }
        })
      },

      //关闭弹出框
      closeDialog () {
        this.addOrEditDialogVisible = false
        this.resetForm('form')
        this.form = {}
      },
    },
  }
</script>
